<template>
  <div class="add">
    <div class="add-main">
      <div class="main-title">
        <span :title="title">{{ title }}</span>
        <span></span>
      </div>
      <div class="main-con" v-if="title == '单元详情'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="小区名称：" prop="communityname">
            <div>{{ ruleForm.communityname }}</div>
          </el-form-item>
          <el-form-item label="单元名称：" prop="unitname">
            <div>{{ ruleForm.unitname }}</div>
          </el-form-item>
          <el-form-item label="栋数：" prop="unitnum">
            <div>{{ ruleForm.unitnum }}</div>
          </el-form-item>
          <el-form-item label="状态：" prop="unitstatus">
            <div v-if="ruleForm.unitstatus == 1">已建设</div>
            <div v-else>未建设</div>
          </el-form-item>
          <el-form-item label="咨询问候：" prop="unitcontext">
            <div v-html="ruleForm.unitcontext"></div>
          </el-form-item>
        </el-form>
      </div>
      <div class="main-con main-con-xz" v-if="title == '新增单元' ||title=='编辑单元'" >
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline" :rules="rules" ref="ruleForm">
          <el-form-item label="小区名称" prop="communityname">
            <el-input v-model="ruleForm.communityname" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="单元名称" prop="unitname">
            <el-input v-model="ruleForm.unitname" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="栋数" prop="unitnum">
            <el-input v-model="ruleForm.unitnum" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item label="选择状态" prop="unitstatus">
            <el-select v-model="ruleForm.unitstatus" placeholder="选择状态">
              <el-option label="已建设" value="1"></el-option>
              <el-option label="未建设" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="main-con-foot">
          <span>咨询问候</span>
          <vue-ueditor-wrap class="addtit" v-model="ruleForm.unitcontext" :config="ueConfig"></vue-ueditor-wrap>
        </div>
      </div>
      <button @click="handleReturn">
        <span class="iconfont">&#xe6b1;</span>
        返回
      </button>
      <button @click="handleSave(1)" v-if="title=='新增单元'">
        <span class="iconfont">&#xe601;</span>
        保存
      </button>
      <button @click="handleSave(2)" v-if="title=='编辑单元'">
        <span class="iconfont">&#xe601;</span>
        保存
      </button>
      <button @click="handleEdit" v-if="title=='单元详情'">
        <span class="iconfont">&#xe601;</span>
        编辑
      </button>

    </div>
  </div>
</template>
<script>
// 引入
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  // 标识,当前组件的名称
  name: "text_f",
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      ueConfig: {
        // UEditor 资源文件的存放路径，就是放置UEditor的文件路径
        UEDITOR_HOME_URL: "/ueditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口
        enableAutoSave: false,
        // 上传文件接口
        // serverUrl: this.$axios.defaults.baseURL + '/mh/ueditor/config',
        serverUrl: 'http://112.6.99.125:7013/safetyPatrol/mh/ueditor/config',
        elementPathEnable: false,
        wordCount: false
      },
      title: "",
      ruleForm: {
        communityname: "",
        unitnum: "",
        unitname: "",
        unitstatus: "",
        unitcontext: "",
        content: ""
      },
      rules: {
        communityname: [
          { required: true, message: "请输入小区名称", trigger: 'blur' },
        ],
        unitnum: [
          { required: true, message: "请输入单元名称", trigger: 'blur' },
        ],
        unitname: [
          { required: true, message: "请输入栋数", trigger: 'blur' },
        ],
        unitstatus: [
          { required: true, message: "请选择状态", trigger: 'blur' },
        ],
      }
    }
  },
  methods: {
    handleServe() {
      if (this.$route.query.type == "DETAIL") {
        // 调详情
        this.title = "单元详情"
        this.$axiosToken({
          url: '/house/getDetailId',
          method: 'get',
          data: { id: this.$route.query.id },
          success: (result) => {
            this.ruleForm = result[0]
            this.ruleForm.unitcontext = result[0].unitcontext
          }
        })
      } else if (this.$route.query.type == "ADD") {
        // 新增单元
        this.title = "新增单元"

      }
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    },
    // 保存(新增)
    handleSave(val) {
      if(val==1){
        // 新增
        this.$axiosToken({
          url: '/house/addunitList',
          method: 'post',
          data: {
            communityname: this.ruleForm.communityname,
            unitname: this.ruleForm.unitname,
            unitnum: this.ruleForm.unitnum,
            unitstatus: this.ruleForm.unitstatus,
            unitcontext: this.ruleForm.unitcontext,
          },
          success: (result) => {
            this.$router.push("/house/unit")
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            })
          }
        })
      }else{
        // 编辑，更新
        this.$axiosToken({
          url: '/house/updateunitList',
          method: 'post',
          data: {
            u_id:this.$route.query.id,
            communityname: this.ruleForm.communityname,
            unitname: this.ruleForm.unitname,
            unitnum: this.ruleForm.unitnum,
            unitstatus: this.ruleForm.unitstatus,
            unitcontext: this.ruleForm.unitcontext,
          },
          success: (result) => {
            this.$router.push("/house/unit")
            this.$message({
              showClose: true,
              message: '更新成功',
              type: 'success'
            })
          }
        })
      }
    },
    // 编辑
    handleEdit(){
      this.title='编辑单元'

    }
  },
  mounted() {
    this.handleServe()
    console.log(this);
    
  },
}
</script>

<style lang="scss" scoped>
// 引入图标
@import "../../../../assets/icon/iconfont.css";

.add-main {
  border: 1px solid #ccc;

  button {
    padding: 10px 20px;
    background: #389af9;
    color: #fff;
    position: fixed;
    right: 20px;
    top: 150px;
    border-radius: 6px;

    &:last-child {
      top: 200px;
    }

    span {
      color: #fff;
    }
  }
}

.main-title {
  display: flex;
  justify-content: space-between;

  span:nth-child(1) {
    font-size: 14px;
    display: inline-block;
    color: #389af9;
    background: #fff;
    padding: 10px 20px;
    border-right: 1px solid #ccc;
    width: 8%;
    box-sizing: border-box;
  }

  span:last-child {
    width: 92%;
    background: #f5f7fa;
    border-bottom: 1px solid #ccc;
  }
}

.main-con::v-deep {
  padding: 20px 40px;

  // div{
  //   display: flex;
  //   justify-content: space-between;
  // }
  .main-con-foot {
    display: flex;

    span {
      font-size: 14px;
      margin: 0 12px;
    }
  }

  .addtit {
    width: 87%;
    display: inline-block;
  }
}

.main-con-xz::v-deep {
  .el-form {
    .el-form-item {
      width: 48%;
    }

    .el-form-item--small {
      .el-form-item__content {
        width: 80%;

        .el-select {
          width: 100%;
        }
      }
    }

    .el-form-item--small {
      &:nth-child(3) {
        .el-form-item__label {
          margin-left: 30px;
        }
      }
    }
  }
}
</style>